<template xmlns:v-on="http://www.w3.org/1999/xhtml">
  <div class="home">
    <!--   -->
    <div class="navText" v-show="navTextShow" @mouseleave="mouseleaveClick($event)">
      <ul>
        <li :key="index" v-for="(item,index) in navTextLists" @click="navTextClick(index)" :class="{'selecttxt':isselecttxt == index}">
          {{item.name}}
        </li>
      </ul>
    </div>
    <div class="updatePsw" v-show="updatePswShow">
      <div class="updatePsw-Content">
        <div class="updatePsw-list">
          <div>
            账户
          </div>
          <div>
            {{usernameVal}}
          </div>
        </div>
        <div class="updatePsw-list">
          <div>
            旧密码
          </div>
          <div>
            <input type="text" v-model="oldPasswordVal">
          </div>
        </div>
        <div class="updatePsw-list">
          <div>
            新密码
          </div>
          <div>
            <input type="text" v-model="newPasswordVal">
          </div>
        </div>
        <div class="updatePsw-but">
          <div class="button-save" @click="addClick">
            保存
          </div>
          <div class="button-cancel" @click="backClick">
            取消
          </div>
        </div>
      </div>
    </div>
    <div class="nav">
      <div class="nav-left">
        <div class="nav-left-title">
          <img src="static/img/公司logo@3x.png" alt="">
        </div>
        <!-- <div class="nav-left-control" @click="navControlClick"> -->
        <!-- 缩小 -->
        <!-- </div> -->
      </div>
      <div class="nav-rContnt" :style="{'width':isMainrouterWidth}">
        <div :class="{'nav-right':isNavRight,'rightClick':isrightClick}" @click="navTextShowClick">
          <div>
            <img src="static/img/1@3x.png" alt="">
          </div>
          <div>
            {{usernameVal}}
          </div>
          <!-- <div> -->
            <!-- <img v-if="navTextShow" src="static/img/向上箭头@2x.png" alt=""> -->
            <!-- <img v-else src="static/img/向下箭头@2x.png" alt=""> -->
          <!-- </div> -->
        </div>
      </div>
    </div>
    <!--路由切换-->
    <div class="content" :style="{'min-height':isMinHeight}">
      <div class="sidebar" :style="{'width':isSidebarWidth}">
        <ul>
          <li v-for="(itemOne,ind) in lists" :key="ind" class="sidebarLi">
            <div :class="{liOne:isLiOne,liOneBg:isliOneBg == ind,liOneList:isLiOneList == ind}" @click="oneSideBarOneClick(ind)">
              <div>
                <!-- <img v-if="isLiOneList == ind" :src="itemOne.imgl" alt=""> -->
                <!-- <img v-else :src="itemOne.imgh" alt=""> -->
                <img :src="itemOne.imgl" alt="">
              </div>
              <div>
                {{itemOne.name}}
              </div>
              <div>
                <img :src="itemOne.imgG" alt="">
              </div>
            </div>
            <div v-show="twoShow == ind && itemOne.children.length > 0" class="liTwo">
              <ul>
                <li v-for="(itemTwo,index) in itemOne.children" :key="index" :class="{twoAfterSelect:istwoSelect == index}" @click="oneSideBarTwoClick(index)">
                  <div :class="{twoSelect:istwoSelect == index}">
                    <!-- <img v-if="istwoSelect == index" :src="itemTwo.imgl" alt=""> -->
                    <!-- <img v-else :src="itemTwo.imgh" alt=""> -->
                  </div>
                  <div :class="{twoSelect:istwoSelect == index}">
                    {{itemTwo.name}}
                  </div>
                  <div>
                    <!-- 图片 -->
                  </div>
                </li>
              </ul>
            </div>
          </li>
        </ul>
      </div>
      <div class="main-router" :style="{'width':isMainrouterWidth}">
        <router-view keep-alive></router-view>
      </div>
    </div>
  </div>
</template>
<script>
import { mapActions } from "vuex";
export default {
  data() {
    return {
      isrightClick: false,
      isNavRight: true,
      usernameVal: "",
      oldPasswordVal: "",
      newPasswordVal: "",
      updatePswShow: false,
      navTextShow: false,
      isselecttxt: 0,
      navTextLists: [
        {
          name: "修改密码"
        },
        {
          name: "切换账号"
        },

        {
          name: "退出登录"
        }
      ],
      isSidebarWidth: "208px",
      isMainrouterWidth: "calc(100% - 208px)",
      isRotateCl: 0,
      isliOneBg: 0,
      isLiOneList: 99999999,
      isLiTwoList: 0,
      isliOneBgCopy: 0,
      istwoSelect: 0,
      istwoSelectCopy: 0,
      isLiOne: true,
      lists: [
        {
          name: "简历管理",
          children: [
            {
              name: "简历库",
              path: "all",
              imgh: "static/img/more_unfold copy 7@3x.png",
              imgl: "static/img/more_unfold copy 6@3x.png"
            },
            {
              name: "黑名单",
              path: "blacklist",
              imgh: "static/img/more_unfold copy 7@3x.png",
              imgl: "static/img/more_unfold copy 6@3x.png"
            }
          ],
          path: "resume",
          imgh: "static/img/简历管理未选@3x.png",
          imgl: "static/img/简历管理选中@3x.png",
          imgJ: "static/img/未选@3x.png",
          imgG: "static/img/选中@3x.png"
        },
        {
          name: "招聘需求",
          children: [],
          path: "requirements",
          imgh: "static/img/招聘需求未选@3x.png",
          imgl: "static/img/招聘需求选中@3x.png",
          imgJ: "static/img/空.png",
          imgG: "static/img/空.png"
        },
        {
          name: "面试管理",
          children: [
            {
              name: "待面试",
              path: "await",
              imgh: "static/img/more_unfold copy 7@3x.png",
              imgl: "static/img/more_unfold copy 6@3x.png"
            },
            {
              name: "面试记录",
              path: "awaitrecord",
              imgh: "static/img/more_unfold copy 7@3x.png",
              imgl: "static/img/more_unfold copy 6@3x.png"
            },
            {
              name: "待入职",
              path: "entry",
              imgh: "static/img/more_unfold copy 7@3x.png",
              imgl: "static/img/more_unfold copy 6@3x.png"
            },
            {
              name: "入职记录",
              path: "entryrecord",
              imgh: "static/img/more_unfold copy 7@3x.png",
              imgl: "static/img/more_unfold copy 6@3x.png"
            }
            // {
            //   name: "面试中",
            //   path: "underway",
            //   imgh: "static/img/more_unfold copy 7@3x.png",
            //   imgl: "static/img/more_unfold copy 6@3x.png"
            // },
          ],
          path: "interview",
          imgh: "static/img/面试未选@3x.png",
          imgl: "static/img/面试选中@3x.png",
          imgJ: "static/img/未选@3x.png",
          imgG: "static/img/选中@3x.png"
        },
        {
          name: "系统设置",
          children: [],
          path: "system",
          imgh: "static/img/系统设置未选@3x.png",
          imgl: "static/img/系统设置选中@3x.png",
          imgJ: "static/img/空.png",
          imgG: "static/img/空.png"
        }
      ],
      twoShow: 0,
      twoShowCopy: 0,
      userName: "暂无名称",
      isMinHeight: "calc(100vh - 65px)",
      addObj: {}
    };
  },
  // 过滤
  filters: {},
  created: function() {
    var self = this;
    self.routerFun();
    self.usernameVal = sessionStorage.getItem("usernameStr");
  },
  // 计算属性
  mounted() {},
  // 事件处理
  methods: {
    // 修改密码
    addClick() {
      var self = this;
      var vFunFalse = self.vFun();
      self.addObj["username"] = sessionStorage.getItem("usernameStr");
      console.log(vFunFalse, self.addObj);
      if (vFunFalse == true) {
        self
          .getuserchangePassword(self.addObj)
          .then(data => {
            if (data.code == 200) {
              self.$message({
                type: "success",
                message: "修改成功"
              });
              self.updatePswShow = false;
            } else {
              self.$message({
                type: "info",
                message: data.message
              });
            }
          })
          .catch(msg => {
            self.$message({
              type: "info",
              message: "服务器异常!"
            });
            this.$router.push({
              path: "/login"
            });
          });
      }
    },
    vFun() {
      var self = this;
      var phoneReg = new RegExp(/^\d{11}$/);
      var numReg = new RegExp(/^\d{1,7}$/);
      var num1Reg = new RegExp(/^\d{1,7}$/);
      var emailReg = new RegExp(
        /^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/
      );
      var strReg = new RegExp(/^[\u4e00-\u9fa5]{2,10}$/);
      var vFunFalse = false;
      if (numReg.test(self.oldPasswordVal) == true) {
        self.addObj["oldPassword"] = self.oldPasswordVal;
        vFunFalse = true;
      } else {
        self.$message({
          type: "info",
          message: "旧密码必填且为数字"
        });
        vFunFalse = false;
        delete self.addObj.oldPassword;
      }
      if (numReg.test(self.newPasswordVal) == true) {
        self.addObj["newPassword"] = self.newPasswordVal;
        vFunFalse = true;
      } else {
        self.$message({
          type: "info",
          message: "新密码必填且为数字"
        });
        vFunFalse = false;
        delete self.addObj.newPassword;
      }
      return vFunFalse;
    },
    backClick() {
      this.updatePswShow = false;
    },
    mouseleaveClick(event) {
      this.navTextShow = false;
    },
    navTextShowClick() {
      this.navTextShow = !this.navTextShow;
      this.isrightClick = !this.isrightClick;
    },
    // 忘记密码操作
    navTextClick(index) {
      var self = this;
      self.isselecttxt = index;
      if (index == 0) {
        this.updatePswShow = true;
      } else if (index == 1) {
        this.$router.push({
          path: "/login"
        });
      } else if (index == 2) {
        this.$router.push({
          path: "/login"
        });
      }
    },
    // 标记样式
    routerFun() {
      var self = this;
      self
        .getdict({})
        .then(data => {
          if (data.code == 200) {
            if (data.data.length > 0) {
              var sources = [];
              var posts = [];
              data.data.forEach(function(ele, ind) {
                if (ele.type == "HUMAN_RESOURCE_SOURCE") {
                  sources.push(ele);
                } else if (ele.type == "HUMAN_RESOURCE_POSITION") {
                  posts.push(ele);
                }
              });
              sessionStorage.setItem("sourcestr", JSON.stringify(sources));
              sessionStorage.setItem("poststr", JSON.stringify(posts));
            }
          } else {
            self.$message({
              type: "info",
              message: data.message
            });
          }
        })
        .catch(msg => {
          // console.log(msg);
          self.$message({
            type: "info",
            message: "服务器异常!"
          });
          this.$router.push({
            path: "/login"
          });
        });
      var paths = this.$route.path.split("/");
      var oneStr = paths[2];
      var twoStr = paths[3];
      if (oneStr == "resume") {
        if (twoStr == "all") {
          this.istwoSelectCopy = 0;
          this.twoShowCopy = 0;
          this.isliOneBgCopy = 0;
          this.isLiOneList = 9999999999999;
        } else if (twoStr == "addResume") {
          this.istwoSelectCopy = 0;
          this.twoShowCopy = 0;
          this.isliOneBgCopy = 0;
          this.isLiOneList = 9999999999999;
        } else if (twoStr == "opInvitation") {
          this.istwoSelectCopy = 0;
          this.twoShowCopy = 0;
          this.isliOneBgCopy = 0;
          this.isLiOneList = 9999999999999;
        } else if (twoStr == "opblackType") {
          this.istwoSelectCopy = 0;
          this.twoShowCopy = 0;
          this.isliOneBgCopy = 0;
          this.isLiOneList = 9999999999999;
        } else if (twoStr == "blacklist") {
          this.istwoSelectCopy = 1;
          this.twoShowCopy = 0;
          this.isliOneBgCopy = 0;
          this.isLiOneList = 9999999999999;
        } else if (twoStr == "opResumeBlack") {
          this.istwoSelectCopy = 1;
          this.twoShowCopy = 0;
          this.isliOneBgCopy = 0;
          this.isLiOneList = 9999999999999;
        }
      } else if (oneStr == "requirements") {
        this.isLiOneList = 1;
        this.twoShowCopy = 1;
        this.isliOneBgCopy = 1;
        this.istwoSelectCopy = 0;
      } else if (oneStr == "opRequirements") {
        this.isLiOneList = 1;
        this.twoShowCopy = 1;
        this.isliOneBgCopy = 1;
        this.istwoSelectCopy = 0;
      } else if (oneStr == "interview") {
        if (twoStr == "await") {
          this.istwoSelectCopy = 0;
          this.twoShowCopy = 2;
          this.isliOneBgCopy = 2;
          this.isLiOneList = 9999999999999;
        } else if (twoStr == "opOffer") {
          this.istwoSelectCopy = 0;
          this.twoShowCopy = 2;
          this.isliOneBgCopy = 2;
          this.isLiOneList = 9999999999999;
        } else if (twoStr == "opResumeawait") {
          this.istwoSelectCopy = 0;
          this.twoShowCopy = 2;
          this.isliOneBgCopy = 2;
          this.isLiOneList = 9999999999999;
        } else if (twoStr == "opFeedback") {
          this.istwoSelectCopy = 0;
          this.twoShowCopy = 2;
          this.isliOneBgCopy = 2;
          this.isLiOneList = 9999999999999;
        } else if (twoStr == "awaitrecord") {
          this.istwoSelectCopy = 1;
          this.twoShowCopy = 2;
          this.isliOneBgCopy = 2;
          this.isLiOneList = 9999999999999;
        } else if (twoStr == "opResumeawaitRec") {
          this.istwoSelectCopy = 1;
          this.twoShowCopy = 2;
          this.isliOneBgCopy = 2;
          this.isLiOneList = 9999999999999;
        } else if (twoStr == "entry") {
          this.istwoSelectCopy = 2;
          this.twoShowCopy = 2;
          this.isliOneBgCopy = 2;
          this.isLiOneList = 9999999999999;
        } else if (twoStr == "entryrecord") {
          this.istwoSelectCopy = 3;
          this.twoShowCopy = 2;
          this.isliOneBgCopy = 2;
          this.isLiOneList = 9999999999999;
        } else if (twoStr == "opResumeaentryRec") {
          this.istwoSelectCopy = 3;
          this.twoShowCopy = 2;
          this.isliOneBgCopy = 2;
          this.isLiOneList = 9999999999999;
        } else if (twoStr == "opResumeaentry") {
          this.istwoSelectCopy = 2;
          this.twoShowCopy = 2;
          this.isliOneBgCopy = 2;
          this.isLiOneList = 9999999999999;
        } else if (twoStr == "opEntry") {
          this.istwoSelectCopy = 1;
          this.twoShowCopy = 2;
          this.isliOneBgCopy = 2;
          this.isLiOneList = 9999999999999;
        }
      } else if (oneStr == "system") {
        this.isLiOneList = 3;
        this.twoShowCopy = 3;
        this.isliOneBgCopy = 3;
        this.istwoSelectCopy = 0;
      } else if (oneStr == "template") {
        this.isLiOneList = 3;
        this.twoShowCopy = 3;
        this.isliOneBgCopy = 3;
        this.istwoSelectCopy = 0;
      } else if (oneStr == "opTemplate") {
        this.isLiOneList = 3;
        this.twoShowCopy = 3;
        this.isliOneBgCopy = 3;
        this.istwoSelectCopy = 0;
      } else if (oneStr == "account") {
        this.isLiOneList = 3;
        this.twoShowCopy = 3;
        this.isliOneBgCopy = 3;
        this.istwoSelectCopy = 0;
      } else if (oneStr == "opAccount") {
        this.isLiOneList = 3;
        this.twoShowCopy = 3;
        this.isliOneBgCopy = 3;
        this.istwoSelectCopy = 0;
      } else if (oneStr == "opDictionaries") {
        this.isLiOneList = 3;
        this.twoShowCopy = 3;
        this.isliOneBgCopy = 3;
        this.istwoSelectCopy = 0;
      } else if (oneStr == "dictionaries") {
        this.isLiOneList = 3;
        this.twoShowCopy = 3;
        this.isliOneBgCopy = 3;
        this.istwoSelectCopy = 0;
      }

      self.fetchData();
    },
    navControlClick() {
      this.isSidebarWidth = "50px";
      this.isMainrouterWidth = "calc(100% - 90px)";
    },
    // 一级目录跳转
    oneSideBarOneClick(ind) {
      var self = this;
      this.twoShowCopy = ind;
      this.isliOneBgCopy = ind;
      this.istwoSelectCopy = 0;
      var pathStr = this.lists[ind].path;
      if (this.lists[ind].children.length > 0) {
        this.$router.push({
          path: "/home/" + pathStr + "/" + this.lists[ind].children[0].path
        });
        self.isMinHeight = "calc(100vh - 65px)";
      } else {
        self.isMinHeight = "calc(100vh - 65px)";
        this.$router.push({
          path: "/home/" + pathStr
        });
      }
    },
    // 二级目录跳转
    oneSideBarTwoClick(ind) {
      var self = this;
      var pathOneStr = self.lists[self.isliOneBg].path;
      var pathTwoStr = self.lists[self.isliOneBg].children[ind].path;
      this.istwoSelectCopy = ind;
      self.$router.push({
        path: "/home/" + pathOneStr + "/" + pathTwoStr
      });
    },
    // 退出登录
    exitClick() {
      this.$router.push({
        path: "/login"
      });
    },
    // 监视路由
    fetchData() {
      if (sessionStorage.getItem("usernameStr")) {
        this.navTextShow = false;
        if (this.lists[this.isliOneBgCopy].children.length > 0) {
          this.istwoSelect = this.istwoSelectCopy;
          this.twoShow = this.twoShowCopy;
          this.isliOneBg = this.isliOneBgCopy;
          this.isLiOneList = 9999999999999;
        } else {
          this.isLiOneList = this.isliOneBgCopy;
          this.twoShow = this.twoShowCopy;
          this.isliOneBg = this.isliOneBgCopy;
          this.istwoSelect = 0;
        }
      } else {
        this.$router.push({
          path: "/login"
        });
      }
    },
    ...mapActions(["getdict", "getuserchangePassword"])
  },
  // 监视
  watch: {
    $route: "fetchData"
  }
};
</script>
<style scoped>
.home {
  background-color: #d0d0d0;
  height: 100%;
  width: 100%;
  overflow: hidden;
}

/*主体部分*/

.content {
  width: 100%;
  display: flex;
  overflow: hidden;
  background-color: #d0d0d0;
}

/*侧栏导航*/

.sidebar {
  /* border-right: 1px solid #f4f6f9; */
  overflow: hidden;
  background-color: #001529;
  overflow: hidden;
}

.liOne {
  display: flex;
  overflow: hidden;
  height: 62px;
  background-color: #001529;
  cursor: pointer;
  color: #666;
  font-size: 16px;
  align-items: center;
  justify-content: center;
  user-select: none;
  font-weight: 600;
  position: relative;
}

.liOne > div:nth-child(1) {
  opacity: 0.65;
  color: #fff;
}

.liOneBg > div:nth-child(1) {
  opacity: 1 !important;
  color: #fff;
}

.liOne > div:nth-child(2) {
  opacity: 0.65;
  color: #fff;
}

.liOneBg > div:nth-child(2) {
  opacity: 1 !important;
  color: #fff !important;
}

.liOne > div:nth-child(3) {
  transform: rotate(180deg);
  -ms-transform: rotate(180deg);
  -moz-transform: rotate(180deg);
  -webkit-transform: rotate(180deg);
  -o-transform: rotate(180deg);
  opacity: 0.65;
}

.liOneBg > div:nth-child(3) {
  transform: rotate(0deg);
  -ms-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -webkit-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  opacity: 1 !important;
}

.liOneList {
  color: #fe966b !important;
}

.liOneList::after {
  position: absolute;
  top: 0;
  right: 0;
  width: 5px;
  height: 50px;
  background-color: #fa8c16;
  content: "";
}

.liOne > div:nth-child(1) {
  width: 40px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  /* margin-right: 5px; */
}

.liOne > div:nth-child(1) img {
  width: 14px;
  height: 14px;
}

.liOne > div:nth-child(2) {
  width: 85px;
  height: 50px;
  line-height: 50px;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.65);
}

.liOne > div:nth-child(3) {
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  /* border: 1px solid red; */
  margin-left: 10px;
}

.liOne > div:nth-child(3) img {
  width: 10px;
  height: 6px;
}

.liTwo {
  width: 100%;
}

.liTwo > ul > li {
  width: 100%;
  height: 40px;
  line-height: 40px;
  overflow: hidden;
  cursor: pointer;
  background-color: #000c17;
  /* border-bottom: 1px solid #47445a; */
  user-select: none;
  display: flex;
  align-items: center;
  position: relative;
}

.liTwo > ul > li > div:nth-child(2) {
  min-width: 80px;
  text-align: left;
  font-size: 17px;
  color: #fff;
  overflow: hidden;
  /* margin-left: 10px; */
  font-size: 14px;
  color: rgba(255, 255, 255, 0.65);
}

.liTwo > ul > li > div:nth-child(1) {
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  /* transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  -moz-transform: rotate(90deg);
  -webkit-transform: rotate(90deg);
  -o-transform: rotate(90deg); */
  margin-left: 40px;
}

.liTwo > ul > li > div:nth-child(1) img {
  width: 8px;
  height: 16px;
}

.liTwo .twoSelect {
  /* border: 1px solid red; */
  color: #fff !important;
}

.liTwo .twoAfterSelect {
  background-color: #fa8c16;
  color: #fff;
}

.liTwo .twoAfterSelect::after {
  position: absolute;
  top: 0;
  right: 0;
  width: 5px;
  height: 50px;
  background-color: #fe966b;
  content: "";
}

input {
  min-width: 50px;
  height: 32px;
  line-height: 32px;
  border: 1px solid #eaeaea;
  border-radius: 3px;
  padding-left: 8px;
  font-size: 15px;
}

/*子页面*/

.main-router {
  overflow: hidden;
  /* margin-left: 20px; */
  /* margin-right: 20px; */
  background-color: #d0d0d0;
  /* border-radius: 5px; */
  overflow: hidden;
  /* border: 1px solid red; */
}

.main-router > div:nth-child(1) {
  /* border: 1px solid red; */
  height: 100%;
  background-color: #fff;
  /* margin-top: 33px; */
  overflow: hidden;
  /* border-radius: 5px; */
  width: 100%;
}

/*导航部分*/

.updatePsw-list {
  display: flex;
  width: 100%;
  height: 50px;
  align-items: center;
  margin-top: 15px;
}

.updatePsw-list > div:nth-child(1) {
  width: 93px;
  text-align: right;
  font-size: 14px;
  color: #787878;
}

.updatePsw-list > div:nth-child(2) {
  width: 230px;
  margin-left: 15px;
  font-size: 14px;
}

.updatePsw-list > div:nth-child(2) input {
  font-size: 14px;
  width: 230px;
}

.updatePsw-but {
  margin-top: 25px;
  display: flex;
  width: 100%;
  height: 50px;
}
.button-save {
  margin-left: 108px;
  width: 74px;
  height: 32px;
  border-radius: 4px;
  background-color: rgba(250, 140, 22, 1);
  text-align: center;
  line-height: 32px;
  color: #fff;
  cursor: pointer;
  font-size: 14px;
  color: rgba(255, 255, 255, 1);
}
.button-cancel {
  cursor: pointer;
  margin-left: 18px;
  width: 74px;
  height: 32px;
  border: 1px solid #ffd9d9d9;
  text-align: center;
  line-height: 32px;
  font-size: 14px;
  border-radius: 4px;
  background-color: #fff;
  color: rgba(0, 0, 0, 0.65);
}

.updatePsw-Content {
  width: 400px;
  height: 300px;
  background-color: #fff;
  border-radius: 5px;
}

.updatePsw {
  position: fixed;
  right: 0px;
  top: 0px;
  width: 100%;
  min-height: 100%;
  background-color: rgba(0, 0, 0, 0.2);
  z-index: 100000000000;
  display: flex;
  align-items: center;
  justify-content: center;
}

.selecttxt {
  /* color: #fe976c !important; */
}

.navText {
  position: fixed;
  right: 25px;
  top: 65px;
  width: 150px;
  height: 120px;
  background: rgba(255, 255, 255, 1);
  box-shadow: 2px 3px 4px 0px rgba(0, 0, 0, 0.34);
  background-color: #fff;
  border: 1px solid #ccc;
  z-index: 100000000000;
}

.navText li {
  width: 100%;
  height: 40px;
  line-height: 40px;
  text-align: center;
  border-bottom: 1px solid rgba(216, 216, 216, 1);
  font-size: 14px;
  font-family: PingFangSC-Regular;
  color: rgba(0, 0, 0, 0.65);
  cursor: pointer;
}

.navText li:nth-last-of-type(1),
.navText li:nth-last-of-type(3) {
  border: 0;
}

.nav {
  height: 64px;
  background-color: #fff;
  overflow: hidden;
  display: flex;
  justify-content: space-between;
}

.nav-left-title {
  width: 208px;
  height: 64px;
  line-height: 64px;
  text-align: center;
  font-size: 20px;
  color: #fff;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #002140;
}

.nav-left-title img {
  width: 115px;
  height: 38px;
  margin-right: 15px;
}

.nav-left-control {
  width: 40px;
  height: 64px;
  line-height: 64px;
  color: #000;
  text-align: center;
}

.nav-left {
  min-width: 208px;
  height: 64px;
  line-height: 64px;
  float: left;
  display: flex;
  /* border: 1px solid red; */
}

.nav-rContnt {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  /* box-shadow: 0px 10px 15px #000; */
}

.nav-right > div:nth-child(1) {
  width: 24px;
  height: 24px;
}

.nav-right > div:nth-child(1) img {
  width: 100%;
  height: 100%;
}

.nav-right > div:nth-child(2) {
  font-size: 14px;
  color: #a2a2a2;
  min-width: 40px;
  margin-left: 10px;
}

.nav-right > div:nth-child(3) {
  width: 15px;
  height: 8px;
  margin-left: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.nav-right > div:nth-child(3) img {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}

.nav-right {
  float: right;
  width: 120px;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 25px;
  cursor: pointer;
}
.rightClick {
  background: rgba(255, 247, 230, 1);
}
.slide-column-enter-active {
  transition: all 0.7s ease;
}

.slide-column-enter,
.slide-column-leave-active {
  transform: translateX(30px);
  opacity: 0.5;
}
</style>